<template>
    <PageWrapper>
      <n-card :bordered="false" class="mb-3 proCard">
        <n-space align="center">
          <n-input-group style="width: 1500px">
            <div style="margin-left: 10px !important;display: flex;align-items: center;">
                <n-input
                style="width: 100%;margin-left: 20px;"
                v-model:value="params.danhao"
                clearable
                placeholder="请输入订单号"
                @keyup.enter="reloadTable"
                />
                <n-input
                style="width: 100%;margin-left: 20px;"
                v-model:value="params.charge_id"
                clearable
                placeholder="请输入设备号"
                @keyup.enter="reloadTable"
                />
                <n-input
                style="width: 100%;margin-left: 20px;"
                v-model:value="params.user_id"
                clearable
                placeholder="请输入用户会员号"
                @keyup.enter="reloadTable"
                />
                <n-input
                style="width: 100%;margin-left: 20px;"
                v-model:value="params.wdtitle"
                clearable
                placeholder="请输入网点名称"
                @keyup.enter="reloadTable"
                />
                <n-input
                style="width: 100%;margin-left: 20px;"
                v-model:value="params.dizhi"
                clearable
                placeholder="请输入网点地址"
                @keyup.enter="reloadTable"
                />
                <div style="margin-left: 20px !important;display: flex;align-items: center;">
                  <n-select v-model:value="params.pingtai" placeholder="请选择平台" style="width: 200px;" :options="optionspt" clearable />
                </div>
            </div>
          </n-input-group>
          <n-input-group style="width: 1500px">
            <div style="margin-left: 10px !important;display: flex;align-items: center;">
              <n-input
              style="width: 100%;margin-left: 20px;"
              v-model:value="params.agent_name"
              clearable
              placeholder="请输入代理商名称"
              @keyup.enter="reloadTable"
              />
              <n-input
              style="width: 100%;margin-left: 20px;"
              v-model:value="params.bussiness_name"
              clearable
              placeholder="请输入商户名称"
              @keyup.enter="reloadTable"
              />
              <n-input
              style="width: 100%;margin-left: 20px;"
              v-model:value="params.yuangong_name"
              clearable
              placeholder="请输入员工名称"
              @keyup.enter="reloadTable"
              />
            </div>
            <div style="margin-left: 20px !important;display: flex;align-items: center;">
                <n-select v-model:value="params.status" placeholder="请选择订单状态" style="width: 200px;" :options="options" clearable />
            </div>
            <div style="margin-left: 20px !important;display: flex;align-items: center;">
                <n-select v-model:value="params.attr" placeholder="请选择订单属性" style="width: 200px;" :options="optionsattr" clearable />
            </div>
            <div style="margin-left: 20px !important;display: flex;align-items: center;">
              <n-date-picker v-model:value="range" type="daterange"  @update:value="onChange4" clearable />
            </div>
            <n-button type="primary" style="margin-left: 40px !important;" @click="reloadTable">
              <template #icon>
                <n-icon>
                  <SearchOutlined />
                </n-icon>
              </template>
              查询
            </n-button>
          </n-input-group>
        </n-space>
      </n-card>
      <n-card :bordered="false" class="proCard">
        <BasicTable
          :columns="columns"
          :request="loadDataTable"
          :row-key="(row) => row.id"
          ref="basicTableRef"
          :actionColumn="actionColumn"
          virtual-scroll
        >
        </BasicTable>
      </n-card>

      <!-- 详情 -->
      <n-modal v-model:show="showModal">
        <n-card
          style="width: 1000px"
          title="订单详情"
          :bordered="false"
          size="huge"
          role="dialog"
          aria-modal="true"
        >
        <n-grid x-gap="12" :cols="2">
          <n-gi>
            <div class="light-green">
              <div class="title">订单信息</div>
              <div class="nr" v-if="roleData.attr == 1">
                <span>租借门店：{{roleData.wdtitle}}</span>
                <span>归还门店：{{roleData.ghwdtitle}}</span>
                <span>设备号：{{roleData.charge_number}}</span>
                <span>宝编码：{{roleData.charge_bao_sn}}</span>
                <span>宝类型：{{roleData.bao_leixing}}</span>
                <span>代理商名称：{{roleData.agent_name}}</span>
                <span>商户名称：{{roleData.bussiness_name}}</span>
                <span>员工名称：{{roleData.yuangong_name}}</span>
                <span>结单类型：{{roleData.jiedan_leixing}}</span>
                <span>平台类型：{{roleData.pingtai}}</span>
              </div>
              <div class="nr" v-if="roleData.attr == 2">
                <span>门店名称：{{roleData.wdtitle}}</span>
                <span>门店地址：{{roleData.dizhi}}</span>
                <span>设备号：{{roleData.charge_number}}</span>
                <span>商品名称：{{roleData.goodscharger_name}}</span>
                <span>代理商名称：{{roleData.agent_name}}</span>
                <span>商户名称：{{roleData.bussiness_name}}</span>
                <span>员工名称：{{roleData.yuangong_name}}</span>
                <span>结单类型：{{roleData.jiedan_leixing}}</span>
                <span>平台类型：{{roleData.pingtai}}</span>
              </div>
              <div class="nr" v-if="roleData.attr == 3">
                <span>门店名称：{{roleData.wdtitle}}</span>
                <span>门店地址：{{roleData.dizhi}}</span>
                <span>设备号：{{roleData.charge_number}}</span>
                <span>代理商名称：{{roleData.agent_name}}</span>
                <span>商户名称：{{roleData.bussiness_name}}</span>
                <span>员工名称：{{roleData.yuangong_name}}</span>
                <span>结单类型：{{roleData.jiedan_leixing}}</span>
                <span>平台类型：{{roleData.pingtai}}</span>
              </div>
            </div>
          </n-gi>
          <n-gi>
            <div class="light-green">
              <div class="title">费用信息</div>
              <div class="nr">
                <span>订单编号：{{roleData.out_order_no}}</span>
                <span style="color: red">订单属性：{{roleData.attrtitle}}</span>
                <span style="color: red">订单状态：{{roleData.status}}</span>
                <span>支付方式：{{roleData.pay_type}}</span>
                <span>开始时间：{{roleData.sdate}}</span>
                <span>结束时间：{{roleData.edate}}</span>
                <span>支付金额：{{roleData.money}}元</span>
                <span>退款金额：{{roleData.refund_money}}元</span>
                <span v-if="roleData.coupons_id != 0 && roleData.youhui_jmleixing == 1">优惠券：减免{{roleData.youhui_minus}}元</span>
                <span v-if="roleData.coupons_id != 0 && roleData.youhui_jmleixing == 2">优惠券：减免{{roleData.youhui_minus}}小时</span>
                <span v-if="roleData.member_id != 0 && roleData.huiyuan_jmleixing == 1">会员卡：减免{{roleData.huiyuan_jmshichang}}小时</span>
                <span v-if="roleData.member_id != 0 && roleData.huiyuan_jmleixing == 2">会员卡：减免{{roleData.huiyuan_jmjie}}元</span>
              </div>
            </div>
          </n-gi>
          <n-gi>
            <div class="light-green">
              <div class="title">用户信息</div>
              <div class="nr">
                <span>用户昵称：{{roleData.username}}</span>
                <span style="color: brown; text-decoration-line: underline; cursor: pointer;" @click="huiyuanUrl">会员ID：{{roleData.member_card}}</span>
              </div>
            </div>
          </n-gi>
          <n-gi>
            <div class="light-green">
              <div class="title">分成明细</div>
              <div class="nr">
                <span>结算方式：{{roleData.fcfangshi}}</span>
                <span>平台：{{roleData.platform_money}}元</span>
                <span>代理商：{{roleData.agent_money}}元</span>
                <span>员工：{{roleData.yuangong_money}}元</span>
                <span>商户：{{roleData.bussiness_money}}元</span>
              </div>
            </div>
          </n-gi>
        </n-grid>
        </n-card>
      </n-modal>

      <!-- 退款 -->
      <n-modal v-model:show="tkshowModal">
        <n-card
          style="width: 1000px"
          title="退款"
          :bordered="false"
          size="huge"
          role="dialog"
          aria-modal="true"
        >
          <n-form
            :model="formParamstk"
            ref="formRef"
            label-placement="top"
            :label-width="100"
          >
            <n-form-item label="可退款金额" path="money">
              <n-input
                placeholder=""
                v-model:value="formParamstk.money"
                disabled
              />
            </n-form-item>
            <n-form-item label="退款金额" path="refund_money">
              <n-input
                placeholder=""
                v-model:value="formParamstk.refund_money"
              />
            </n-form-item>
            <n-form-item label="退款方式" path="type">
              <n-radio-group v-model:value="formParamstk.type" name="type">
                <n-space>
                  <n-radio :key="1" :value="1">原路退回</n-radio>
                  <n-radio :key="2" :value="2">退回余额</n-radio>
                </n-space>
              </n-radio-group>
            </n-form-item>
          </n-form>
          <template #footer>
            <n-space style="margin: 0 auto;">
              <n-button type="primary" @click="tuikuan" style="margin: 100px 0 50px; margin-left: 430px">提交</n-button>
            </n-space>
          </template>
        </n-card>
      </n-modal>

    </PageWrapper>
  </template>
  
  <script lang="ts" setup>
    import { h, reactive, ref } from 'vue';
    import { useMessage } from 'naive-ui';
    import { BasicColumn, BasicTable, TableAction } from '@/components/Table';
    import { SearchOutlined } from '@vicons/antd';
    import { columns } from './columns';
    import { erlunlist,orderQuxiao,orderHuifu,orderTuikuan,info,orderTuikuanalipay } from '@/api/order/index';
  
    const message = useMessage();
    const basicTableRef = ref();
    const tableData = ref();
    const roleData = ref({
      wdtitle: '',
      ghwdtitle: '',
      dizhi: '',
      charge_number: '',
      agent_name: '',
      bussiness_name: '',
      yuangong_name: '',
      jiedan_leixing: '',
      out_order_no: '',
      status: '',
      sdate: '',
      edate: '',
      money: '', 
      username: '',
      member_card: '',
      platform_money: '',
      agent_money: '',
      bussiness_money: '',
      yuangong_money: '',
      pingtai: '',
      attr: 0,
      charge_bao_sn: '',
      bao_leixing: '',
      goodscharger_name: '',
      attrtitle: '',
      pay_type: '',
      coupons_id: 0,
      youhui_jmleixing: 0,
      member_id: 0,
      huiyuan_jmleixing: 0,
      huiyuan_jmshichang: '',
      huiyuan_jmjie: '',
      youhui_minus: '',
      fcfangshi: '',
      refund_money: '',
    });
    const range = ref<[number, number]>();
    const showModal = ref(false);
    const params = reactive({
      danhao: '',
      charge_id: '',
      user_id: '',
      tell: '',
      wdtitle: '',
      dizhi: '',
      sdate: '',
      edate: '',
      agent_name: '',
      bussiness_name: '',
      yuangong_name: '',
      status: null,
      pingtai: null,
      attr: null,
    });
   
    const options = ref([
      {
        label: "弹宝中",
        value: 0,
      }, {
        label: '计费中',
        value: 1
      }, {
        label: '暂停计费',
        value: 2
      }, {
        label: '待支付',
        value: 3
      }, {
        label: '支付中',
        value: 4
      }, {
        label: '已支付',
        value: 5
      }, {
        label: '已取消',
        value: 6
      }, {
        label: '部分退款',
        value: 7
      }, {
        label: '全部退款',
        value: 8
      }, {
        label: '退款中',
        value: 9
      }, {
        label: '已购买',
        value: 11
      }, {
        label: '购宝待付款',
        value: 12
      }
    ])

    const optionspt = ref([
      {
        label: "微信小程序",
        value: 0,
      },
      {
        label: '支付宝小程序',
        value: 1
      },
      {
        label: '抖音小程序',
        value: 2
      }
      
    ])

    const optionsattr = ref([
      {
        label: "充电宝",
        value: 1,
      },
      {
        label: '充电盒子',
        value: 2
      },
      {
        label: '充电线',
        value: 3
      }
    ])

    // 操作
    const actionColumn: BasicColumn = reactive({
      width: 260,
      title: '操作',
      key: 'action',
      fixed: 'right',
      align: 'center',
      render(record) {
        return h(TableAction as any, {
          actions: [
            {
              label: '详情',
              onClick: handleEdit.bind(null, record),
            }, {
              label: '退款',
              onPositiveClick: handleTuikuan.bind(null, record),
              isConfirm: true,
              confirmContent: '您确定要退款吗？',
            }, {
              label: '取消',
              onPositiveClick: handleDelete.bind(null, record),
              isConfirm: true,
              confirmContent: '您确定要取消吗？',
            }, {
              label: '恢复',
              onPositiveClick: handleHuifu.bind(null, record),
              isConfirm: true,
              confirmContent: '您确定要恢复吗？',
            },
          ],
        });
      },
    });
  
    //列表数据
    const loadDataTable = async (res) => {
      const result = await erlunlist({ ...params, ...res });
      tableData.value = result.list;
      return result;
    };

    // 编辑
    function handleEdit(record: Recordable) {
      let id = record.id;

      info({ id: id }).then((res) => {
        roleData.value = res;
        showModal.value = true;
      });
    }
    
    //取消订单
    function handleDelete(record: Recordable) {
      if(record.status < 5){
        orderQuxiao({ id: record.id,role_id:1,agent_id:1, }).then(() => {
          message.success('取消成功');
          reloadTable();
        });
      }else{
        message.error('此订单不可取消');
      }
    }

    // 退款
    const tkshowModal = ref(false);
    const defaultValueRef = () => ({
      id: '',
      money: '',
      refund_money: '',
      type: 1,
      pingtai: 0,
    });
    const formParamstk = ref(defaultValueRef());
    function handleTuikuan(record: Recordable) {
      if(record.status == 5 || record.status == 7){
        tkshowModal.value = true;

        formParamstk.value.refund_money = '';
        formParamstk.value.money = record.money;
        formParamstk.value.id = record.id;
        formParamstk.value.pingtai = record.pingtai;
      }else{
        message.error('此订单不可退款');
      }
    }
    function tuikuan(){
      let id = formParamstk.value.id;
      let money = formParamstk.value.money;
      let refund_money = formParamstk.value.refund_money;
      let type = formParamstk.value.type;
      let pingtai = formParamstk.value.pingtai;

      if(parseFloat(refund_money) > parseFloat(money)){
        message.error('退款金额不能大于可退款金额');
      }else{
        if(pingtai == 0){
          //微信
          orderTuikuan({ id: id,money: refund_money,type: type, }).then(() => {
            message.success('操作成功');
            tkshowModal.value = false;
            reloadTable();
          });
        }else if(pingtai == 1){
          //支付宝
          orderTuikuanalipay({ id: id,money: refund_money,type: type, }).then(() => {
            message.success('操作成功');
            tkshowModal.value = false;
            reloadTable();
          });
        }
      }
    }

    // 恢复订单
    function handleHuifu(record: Recordable) {
      if(record.status == 5 && record.fcfangshi == 3){
        orderHuifu({ id: record.id,role_id:1,agent_id:1,}).then(() => {
          message.success('恢复成功');
          reloadTable();
        });
      }else{
        message.error('此订单不可恢复');
      }
    }

    //加载表格
    function reloadTable() {
      basicTableRef.value.reload();
    }

    function onChange4(v: number){
      if(v != null){
        params.sdate = v[0];
        params.edate = v[1];
      }else{
        params.sdate = '';
        params.edate = '';
      }
    }

    function huiyuanUrl(){
      location.href = '/users/weixin'
    }
  
  </script>
  
  <style lang="less" scoped>
    .light-green{
      margin-bottom: 30px;

      .title{
        margin-bottom: 20px;
        font-size: 18px;
      }

      .nr{

        span{
          display: block;
          margin-bottom: 6px;
        }
      }
    }


  </style>
  